import React from 'react'
import { Card, Button, Table, Divider, Row, Col, Modal, Form, Input } from 'antd'
import DescriptionList from 'components/DescriptionList'
import styles from './index.less'
import {
  balanceChangeType,
  balanceChangeReason,
  balanceChangeStatus
} from 'utils/enumConfig'
import moment from 'moment'
import { LwjDownload } from 'components'

const FormItem = Form.Item
const {TextArea} = Input
const AuditModal = ({
                      currentItem, distributorItem, dispatch, form: {
    getFieldDecorator,
    validateFields,
    setFieldsValue,
  }, ...auditModalProps
                    }) => {
  const {Description} = DescriptionList

  const formItemLayout = {
    labelCol: {
      xs: {span: 8, offset: 0},
      sm: {span: 8, offset: 0},
    },
    wrapperCol: {
      xs: {span: 8, offset: 0},
      sm: {span: 8, offset: 0},
    },
  }

  const toAudit = () => {
    validateFields((err, values) => {
      if (!err) {
        values.version = currentItem.version
        values.id = currentItem.id
        values.success = true
        dispatch({
          type: 'balanceChangeApply/audit',
          payload: values
        })
      }
    })
  }

  const toDeny = () => {
    validateFields((err, values) => {
      if (!err) {
        values.id = currentItem.id
        values.version = currentItem.version
        values.success = false
        dispatch({
          type: 'balanceChangeApply/audit',
          payload: values
        })
      }
    })
  }

  const toCancel = () => {
    dispatch({
      type: 'balanceChangeApply/hideModal',
      payload: {}
    })
  }

  const voucherHandler = () => {
    switch (currentItem.reason) {
      case 'MORE_RECEIVING_REFUND':
        return '收款单'
      case 'WITHDRAW_DEPOSIT':
        return '支付凭证号'
      default:
        return '合同号'
    }
  }

  /** @namespace currentItem.des */
  /** @namespace currentItem.contractChangeReason */
  /** @namespace currentItem.provinceName */
  /** @namespace currentItem.cityName */
  /** @namespace currentItem.districtName */
  return (
    <div>
      <Modal {...auditModalProps}>
        <Card className={styles.card} bordered={false}>
          <DescriptionList size="large"
                           title="审核金额变更"
                           style={{marginBottom: 32}}>
            <Description term="门店名称">{currentItem.distributorName}</Description>
            <Description term="变更类型">{balanceChangeType[(currentItem.type)]}</Description>
            <Description term="变更金额">{Math.abs(currentItem.changingAmount)}</Description>
            <Description term="申请人">{currentItem.userName}</Description>
            <Description term="申请时间">{moment(currentItem.createTime).format('YYYY-MM-DD HH:mm:ss')}</Description>
            <Description term="附件">{<LwjDownload title={'点击下载'}
                                                   targetUrl={currentItem.attachment || ''}/>}</Description>
            <Description term="变更原因">{balanceChangeReason[(currentItem.reason)]}</Description>
            <Description term={voucherHandler()}>{currentItem.reasonKeywords}</Description>
            <Description term="备注">{currentItem.remark}</Description>
          </DescriptionList>
        </Card>
        <Row>
          <Col span={24}>
            <FormItem {...formItemLayout} hasFeedback label='审核备注'>
              {getFieldDecorator('auditDesc', {
                rules: [{required: true, message: '审核备注必须填写!'}],
              })(<Input/>)}
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" justify="center">
          <Col span={2}>
            <Button type="primary" onClick={() => toAudit()}>审核通过</Button>
          </Col>
          <Col span={2}>
            <Button type="primary" onClick={() => toDeny()}>审核不通过</Button>
          </Col>
          <Col span={2}>
            <Button onClick={() => toCancel()}>取消</Button>
          </Col>

        </Row>
      </Modal>
    </div>
  )
}

export default Form.create()(AuditModal)
